import React,{useState,useEffect} from "react"
import {Swiper} from "antd-mobile"
import {getBannerList} from "./api"
import style from "./swiper.css"
const {banner} =style
export default function SwiperCom() {
    const [bannList,setBannnerList]=useState([])
    const getBanner = () => {
        getBannerList().then(res => {
            // console.log(res);
            setBannnerList(res.data.home)
        })
    }
    useEffect(() => {
        getBanner()
    }, [])
    return (
      <div className={banner}>
        {bannList.length > 0 && (
          <Swiper autoplay={true} loop={true}>
            {bannList.map((item, i) => (
              <Swiper.Item key={i}>
                <img src={item}></img>
              </Swiper.Item>
            ))}
          </Swiper>
        )}
      </div>
    );
}